<template>
    <div class="two_box">
    </div>
</template>

<script>
import { getEchart } from '@/api';
import * as echarts from 'echarts'
export default {
    data() {
        return {
            echartList: []
        }
    },
    mounted() {
        this.getEchartList()


    },
    methods: {
        async getEchartList() {
            let res = await getEchart()
            // this.echartList = res.year
            // console.log(this.echartList);
            let op = echarts.init(document.querySelector('.two_box'))
            let option = {
                title: {
                    text: "班级薪资分布",
                    textStyle: {
                        fontSize: 22
                    },
                    top: 20,
                    left: 20
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    bottom: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: '班级薪资分布',
                        type: 'pie',
                        radius: ['50%', '65%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 20,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a'],
                        data:res.salaryData.map(item=>{
                            return {
                                name:item.label,
                                value:item.b_count
                            }
                        })
                    }
                ]
            };
            op.setOption(option)
        }
    },
}
</script>

<style>
.two_box {
    width: 100%;
    height: 100%;
}
</style>